<template>
  <div class="pos">
    <el-row>
      <el-col :span='7' class="pos-order" id="order-list">
        <el-tabs>
          <el-tab-pane label="点餐">
            <el-table :data="tableData" border style="width:100%">
              <el-table-column prop="itemName" label="餐品名称"></el-table-column>
              <el-table-column prop="count" label="数量" width="50"></el-table-column>
              <el-table-column prop="price" label="金额" width="60"></el-table-column>
              <el-table-column  label="操作" width="100"  fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="deleteOne(scope.row)">删除</el-button>
                  <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="totalDiv">
              <small>数量:</small>{{totalCount}} &nbsp;&nbsp;&nbsp;&nbsp; <small>金额:</small>{{totalMoney}} 元 
            </div>
            <div class="div-btn"> 
              <el-button type="warning">挂单</el-button>
              <el-button type="danger" @click="delAll">删除</el-button>
              <el-button type="success" @click="checkout">结账</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="挂单"></el-tab-pane>
          <el-tab-pane label="外卖"></el-tab-pane>
        </el-tabs>
      </el-col>

      <el-col :span='17' >
        <div class="often-goods">
          <div class="title">常用餐品</div>
          <div class="goodslist">
            <ul>
              <li v-for="item in oftenItems" :key="item.itemId" @click="addOrderList(item)">
                <span>{{item.itemName}}</span>
                <span class="price">￥{{item.price}}元</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="goodstype">
          <el-tabs>
            <el-tab-pane label="汤类">
              <div>
                <ul class='cookList'>
                  <li v-for="goods in item0List" :key="goods.itemId" @click="addOrderList(goods)">
                    <span class="foodImg"><img :src="goods.itemImg" width="100%"></span>
                    <span class="foodName">{{goods.itemName}}</span>
                    <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="烤肉类">
              <div>
                <ul class='cookList'>
                  <li v-for="goods in item1List" :key="goods.itemId" @click="addOrderList(goods)">
                    <span class="foodImg"><img :src="goods.itemImg" width="100%"></span>
                    <span class="foodName">{{goods.itemName}}</span>
                    <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="面包类">
              <div>
                <ul class='cookList'>
                  <li v-for="goods in item2List" :key="goods.itemId" @click="addOrderList(goods)">
                    <span class="foodImg"><img :src="goods.itemImg" width="100%"></span>
                    <span class="foodName">{{goods.itemName}}</span>
                    <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="小吃类">
              <div>
                <ul class='cookList'>
                  <li v-for="goods in item3List" :key="goods.itemId" @click="addOrderList(goods)">
                    <span class="foodImg"><img :src="goods.itemImg" width="100%"></span>
                    <span class="foodName">{{goods.itemName}}</span>
                    <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
               <el-tab-pane label="饮品类">
              <div>
                <ul class='cookList'>
                  <li v-for="goods in item4List" :key="goods.itemId" @click="addOrderList(goods)">
                    <span class="foodImg"><img :src="goods.itemImg" width="100%"></span>
                    <span class="foodName">{{goods.itemName}}</span>
                    <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
                <el-tab-pane label="套餐类">
              <div>
                <ul class='cookList'>
                  <li v-for="goods in item5List" :key="goods.itemId" @click="addOrderList(goods)">
                    <span class="foodImg"><img :src="goods.itemImg" width="100%"></span>
                    <span class="foodName">{{goods.itemName}}</span>
                    <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'Pos',
  data(){
    return {
       tableData: [],
       oftenItems:[],
      item0List:[],
      item1List:[],
      item2List:[],
      item3List:[],
      item4List:[],
      item5List:[],
      totalMoney:0,
      totalCount:0,
    }
  },
  methods: {
    addOrderList(item){
      this.totalMoney = 0;
      this.totalCount = 0;
      let isexcite = false;  
    
      for(let i = 0; i<this.tableData.length; i++) {
        if(this.tableData[i].itemId == item.itemId) {
          isexcite = true 
        }
      }
     
      if(isexcite) {
        let arr = this.tableData.filter(obj => {
          return obj.itemId == item.itemId
        })
        
        arr[0].count++;
      } else {
        
        let newGoods = {itemId:item.itemId,itemName:item.itemName,price:item.price,count:1};
        this.tableData.push(newGoods)
      }
      this.getAllMoney()
      
    },
    
    deleteOne(good){
      this.tableData = this.tableData.filter(item => {
        return item.itemId !== good.itemId
      })
      this.getAllMoney()
    },
    
    getAllMoney(){
      this.totalMoney = 0;
      this.totalCount = 0;
      if(this.tableData) { 
          this.tableData.forEach((Element)=> {
                  console.log(Element)
                  this.totalCount += Element.count; 
                  this.totalMoney = this.totalMoney+(Element.count*Element.price)
                })
      }
      
    },
    checkout() {
        if (this.totalCount!=0) {
            this.tableData = [];
            this.totalCount = 0;
            this.totalMoney = 0;
            this.$message({
                message: '恭喜你，结账成功，欢迎再次光临!',
                type: 'success'
            });

        }else{
            this.$message.error('不能空结哦！');
        }

},
    
    delAll(){
      this.tableData=[];
      this.totalMoney=0;
      this.totalCount=0;
    }
  },
  created() {
    //请求数据
    axios.get('https://www.fastmock.site/mock/30fd333ea6c090c3fce1c11258e294ce/test1/oftenItems')
      .then(response=>{
         console.log(response);
         this.oftenItems=response.data.oftenItems;
      })
      .catch(error=>{
          console.log(error);
          alert('网络错误，不能访问');
      })
      
      axios.get('https://www.fastmock.site/mock/30fd333ea6c090c3fce1c11258e294ce/test1/itemList')
      .then(response=>{
        this.item0List = response.data.data[0];
        this.item1List = response.data.data[1];
        this.item2List = response.data.data[2];
        this.item3List = response.data.data[3];
        this.item4List = response.data.data[4];
        this.item5List = response.data.data[5];
      })
      .catch(error=>{
        console.log(error);
          alert('网络错误，不能访问');
      })
  },
  mounted() {
    let orderHeight = document.body.clientHeight;
    document.getElementById('order-list').style.height = orderHeight+'px';
  },
}
</script>

<style >

.pos-order {
  background-color: #F9FAFC;
  border-right: 1px solid #C0CCDA;
  height: 100%;
  
  padding-left: 5px;
}

.totalDiv {
  border-bottom: 1px solid #D3DCE6;
  background-color: #fff;
  padding: 10px;
}
.div-btn {
  margin-top: 15px;
}

.title {
  height: 20px;
  border-bottom: 1px solid #D3DCE6;
  padding: 10px;
  background-color: #F9FAFC;
  text-align: left;
}

.goodslist ul li {
  list-style: none;
  float: left;
  padding: 10px;
  margin: 10px;
  background-color: #fff;
  border: 1px solid #E5E9F2;
  cursor: pointer;
}

.price {
  color: #58B7FF;
}

.goodstype {
  clear: both;
  padding-left: 5px;
}

.cookList li{
       list-style: none;
       width:23%;
       border:1px solid #E5E9F2;
       height: auot;
       overflow: hidden;
       background-color:#fff;
       padding: 2px;
       float:left;
       margin: 2px;
       cursor: pointer;
   }
   .cookList li span{

        display: block;
        float:left;
   }
   .foodImg{
       width: 40%;
   }
   .foodName{
       font-size: 16px;
       padding-left: 10px;
       color:brown;

   }
   .foodPrice{
       font-size: 16px;
       padding-left: 10px;
       padding-top:10px;
   }
</style>

<style >
  .el-tabs__nav-scroll {
    background-color: #fff;
  }
</style>